<template>
    <div class="pages">
        <div class="login-box">
            <div class="title">颢屹ERP管理系统</div>
            <div class="form">
                <el-form :model="ruleForm" label-position="top" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password"  show-password placeholder="请输入登录密码"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" :loading="loading" @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="subtitle">
                Copyright 2021  © 上海闻峥文化传播有限公司, All Rights Reserved.
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { setToken } from '@/utils/auth'
export default {
    name: "",
    data() {
        return {
            loading:false,
            ruleForm:{
                phone:'admin',
                password:'123456789'
            },
            rules: {
                phone: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    components: {},
    mounted() {},
    methods: {
         ...mapMutations("user", ["SET_AVATAR", "SET_NAME", 'setUserInfo']),
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (!valid) return;
                this.loading = true
                let res = await this.$Http.userLogin(this.ruleForm);
                 this.loading = false
                localStorage.setItem('userInfo', JSON.stringify(res.data.user))
                setToken(res.data.user_token)
                this.setUserInfo(res.data.user)
                this.SET_AVATAR(res.data.user.avatar)
                this.SET_NAME(res.data.user.username)
                let {data} = await this.$Http.getUserMenu()
                res.data.menu = [{path:'/index/index'}]
                // this.$store.commit('settings/setMenuList',data)
                localStorage.setItem('menu', JSON.stringify(data))
                this.$router.push({ path: res.data.menu[0].path || '/', })
                setTimeout(() => {
                    this.$router.go(0)
                })
                // this.utils.goUrl('/aboutYDY/aboutYDY');
            });
        },
    },
};
</script>
<style lang='scss' scoped>
.pages{
    background-color:#4664e6;
    width: 100vw;
    height: 100vh;
    .login-box{
        width: 450px;
        height: 500px;
        background-color: #fff;
        border-radius: 25px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .title{
            margin-top: 140px;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
        }
        .subtitle{
            width: 100%;
            margin-top: 150px;
            font-size: 14px;
            color:#b3b3b3;
        }
        .form{
            width: 300px;
            margin: 50px auto;
            ::v-deep.el-button{
                width: 100%;
            }
        }
    }
}
</style>